﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="flexi.aspx.cs" Inherits="Web.flexi" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">

    <script type="text/javascript" src="js/jquery/jquery.js"></script>

    <script type="text/javascript" src="js/jquery/flexigrid/flexigrid.js"></script>

    <style type="text/css">
        body
        {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
        }
        .flexigrid div.fbutton .add
        {
            background: url(css/images/add.png) no-repeat center left;
        }
        .flexigrid div.fbutton .delete
        {
            background: url(css/images/close.png) no-repeat center left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table id="flex1" style="display: none">
        </table>

        <script type="text/javascript">
            $(document).ready(function() {
                $("#flex1").flexigrid({
                    height: 400, //flexigrid插件的高度，单位为px
                    width: 600, //宽度值，auto表示根据每列的宽度自动计算
                    striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
                    usepager: true, //是否分页
                    pagestat: 'Displaying {from} to {to} of {total} items', //显示当前页和总页面的样式
                    url: 'ajax.aspx', //ajax方式对应的url地址
                    query: 'name=zyj&type=1',
                    qtype: 'html/text',
                    nomsg: '暂时无记录', //无结果的提示信息
                    procmsg: '', //正在处理的提示信息
                    rp: 15, // 每页默认的结果数
                    resizable: false, //是否可伸缩
                    method: 'POST', // 数据发送方式
                    colModel: [
				{ display: '编号', name: 'number', width: 40, sortable: true, align: 'center' },
				{ display: '名称', name: 'name', width: 180, sortable: true, align: 'left' },
				{ display: '日期', name: 'date', width: 120, sortable: true, align: 'left' },
				{ display: '操作', name: 'operate', width: 130, sortable: true, align: 'left' }
				]
                });
            })
        </script>

    </div>
    </form>
</body>
</html>
